<template>
  <el-form ref="fltForm" label-width="130px" :model="FLT_INFO" size="mini">
    <el-row>
     <el-col :span="24">
        <el-form-item label="用户账号：" prop="usrCode" :rules="rules.usrCode">
          <el-input :disabled="!isAdd" maxlength="20" style="width: 100%" v-model="FLT_INFO.usrCode"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-form-item label="用户名称：" prop="usrName" :rules="rules.usrName">
          <el-input :disabled="disabled" maxlength="20" style="width: 100%" v-model="FLT_INFO.usrName"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row v-if="show">
      <el-col :span="24">
        <el-form-item label="账号密码：" prop="usrPassword" :rules="rules.usrPassword">
          <el-input :disabled="disabled" maxlength="30" style="width: 100%" v-model="FLT_INFO.usrPassword" type="password"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row v-if="show">
      <el-col :span="24">
        <el-form-item label="密码确认：" prop="reusrPassword" :rules="rules.reusrPassword">
          <el-input :disabled="disabled" maxlength="30" style="width: 100%" v-model="FLT_INFO.reusrPassword" type="password"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-form-item label="区域中心：" prop="usrDptsName" :rules="rules.usrDptsName">
          <el-popover
            placement="bottom"
            width="400"
            trigger="click"
            v-model="showpop"
            :disabled="disabled"
           >
              <el-tree
              :data="organization"
              :props="defaultProps"
               node-key="dptId"
               default-expand-all
               ref="tree"
               @node-click="chose"
              >
              </el-tree>
            <el-input :disabled="disabled" slot="reference" placeholder="点击选择派车中心" v-model="FLT_INFO.usrDptsName"></el-input>
          </el-popover>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-form-item label="角色：" prop="usrRles" :rules="rules.usrRles">
               <el-select :disabled="disabled" v-model="FLT_INFO.usrRles" multiple placeholder="请选择 (可多选)" style="width: 100%">
                 <el-option
                   v-for="(item,index) in options"
                   :key="index"
                   :label="item.rleName"
                   :value="item.uuid">
                 </el-option>
               </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-form-item label="联系电话：" prop="usrCellphone" :rules="rules.usrCellphone">
          <el-input :disabled="disabled" maxlength="20" style="width: 100%" v-model="FLT_INFO.usrCellphone"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-form-item label="邮箱：" prop="usrEmail" :rules="rules.usrEmail">
          <el-input :disabled="disabled" maxlength="37" style="width: 100%" v-model="FLT_INFO.usrEmail"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-form-item label="状态：" prop="usrStatus" :rules="rules.usrStatus">
          <el-select :disabled="disabled" style="width: 100%" v-model="FLT_INFO.usrStatus">
            <el-option v-for="(item, index) in usrStatusList" :value="item.value" :key="index" :label="item.label">
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-form-item label="备注：" prop="remark" :rules="rules.remark">
          <el-input type="textarea" resize="none" :disabled="disabled" maxlength="150" style="width: 100%" rows="3" v-model="FLT_INFO.remark"></el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row class="el-dialog__footer">
      <el-col :span="24">
        <el-form-item>
          <el-button @click="close">关闭</el-button>
          <el-button v-if="!disabled" @click="save" type="primary">保存</el-button>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
import {
} from '@/request/api'
export default {
  name: 'dialog',
  props: {
    flt_info: {
      type: Object,
      required: true
    },
    disabled: {
      type: Boolean,
      default: false
    },
    showDialog: {
      type: Boolean,
      required: true
    },
    show: {
      type: Boolean,
      default: false
    },
    dialogmode: {
      type: String
    }
    // options: {
    //   type: Array,
    //   // default: true
    // }
  },
  data() {
    // 密码校验
    var reusrPassword = (rule, value, callback) => {
      // console.log(rule, value, callback)
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.FLT_INFO.usrPassword) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      checked: true,
      FLT_INFO: this.flt_info,
      showpop: false,
      // 角色
      usrRles: [],
      // 角色 多选
      // props: { multiple: true },
      // 角色绑定的数组

      // 状态
      usrStatusList: [
        {
          value: 'Y',
          label: '可用'
        },
        {
          value: 'N',
          label: '不可用'
        },
      ],
      rules: {
        usrName: [
          { required: true, message: '请输入用户名称', trigger: 'blur' },
        ],
        usrCode: [
          { required: true, message: '请输入用户账号', trigger: 'blur' },
        ],
        // 密码确认校验
        usrPassword: [
          { required: true, message: '请输入密码', trigger:  ['blur','change'] },
          { pattern: /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W_]+$)(?![a-z0-9]+$)(?![a-z\W_]+$)(?![0-9\W_]+$)[a-zA-Z0-9\W_]{8,30}$/,
            message: '密码为数字，小写字母，大写字母，特殊符号 至少包含三种，长度为 8-30位'
          }
        ],
        reusrPassword: [
          { required: true, validator: reusrPassword, message: '两次密码输入不一致', trigger:  ['blur','change'] }
        ],
        usrDptsName: [
          { required: true, message: '请选择派车中心', trigger: 'change' },
        ],
        usrRles: [
          { required: true, message: '请选择角色', trigger: 'change' },
        ],
        usrCellphone: [
          {
            pattern: /^[0-9]+$/,
            message: '请输入正确的手机号',
            trigger: 'blur'
          }
        ],
        usrEmail: [
          {
            pattern: /^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/,
            message: '请输入正确的Email',
            trigger: 'blur'
          },
        ],
        usrStatus: [
          { required: true, message: '请选择状态', trigger: 'blur' },
        ]
      },
      data2: [],
      options: [],
      defaultProps: {
        children: 'departments',
        label: 'dptName'
      },
    }
  },
  watch: {
    flt_info() {
      this.FLT_INFO = this.flt_info
    }
  },

  methods: {
    close() {
      // 关闭时清楚验证信息
      this.$emit('close')
    },
    save() {
      this.$refs['fltForm'].validate(valid => {
        if (valid) {
          // this.FLT_INFO.usrRles = this.usrRles
          this.$emit('save', this.FLT_INFO)
        }
      })
    },
    // 组织机构
    // getzuzhi() {
    //   getzuzhiList('P').then(res=>{
    //     this.data2 = res.data.FTKJWLHYPT
    //   })
    // },
    chose(data) {
      // 派车中心
      this.FLT_INFO.usrDptsName = data.dptName
      // 派车中心id
      this.FLT_INFO.usrDpts = data.dptId || data.uuid
      // 上级机构 企业id
      // this.FLT_INFO.usrEtpId = data.dptFltId || data.uuid // 默认写死 -1 不用修改
      this.showpop = false
    },
    // 获取角色列表
    // getroles () {
    //   queryroles().then(res=>{
    //     this.options = res.data.FTKJWLHYPT
    //   })
    // },
  },
  created() {
    this.getzuzhi()
    this.getroles()
  },
  mounted () {
    this.$refs.fltForm.clearValidate()
  },
  computed: {
    // 是否新增操作
    isAdd () {
      return this.dialogmode === this.DIALOG_MODE.ADD
    },
    organization() {
      return this.data2.map( item => {
        item['dptName']  = item.fltName
        return item
      })
    }
  },

}
</script>

<style lang="scss" scoped></style>
